<template>

  <Card class="ll cpyszjy-page page-fill" style="height:800px">
    <div>产品映射参数</div>
    <div id="middle">
      <v-form>
        <v-form-item label="产品大类:" labelWidth="200px">
          <v-select v-model="productType" :select-list="productTypeList" @item-click="productTypeCheck"></v-select>
        </v-form-item>
        <v-form-item label="版本:" labelWidth="200px">
          <v-input class="" v-model="productVersion" placeholder="版本" disabled></v-input>
        </v-form-item>
        <v-form-item label="渠道:" labelWidth="200px">
          <v-select v-model="channel" :select-list="channelList"></v-select>
        </v-form-item>
        <v-form-item label="期数:" labelWidth="200px">
          <v-select v-model="tenor" :select-list="tenorList"></v-select>
        </v-form-item>

        <v-form-item label="评级:" labelWidth="200px">
          <v-select v-model="grate" :select-list="grateList"></v-select>
        </v-form-item>
        <v-form-item label="产品细类:" labelWidth="200px">
          <v-checkbox-group v-model="productValueList" class="check">
            <v-checkbox v-for="item in productList" :key="item.productCode" :label='item.productCode+":"+item.productName'>{{item.productName}}</v-checkbox>

          </v-checkbox-group>
          <v-checkbox v-if="productList.length>0" @on-change="chooseAll" v-model="mark">全选</v-checkbox>
        </v-form-item>
        <v-button class="bt" size="normal" type="primary" @on-click="conf">确认</v-button>
        <v-button size="normal" class="bt" type="primary" @on-click="reback()">返回</v-button>
      </v-form>
    </div>
  </Card>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      mark: '',
      productType: '',
      productTypeList: [],
      productVersion: '',
      tenor: '',
      tenorList: [],
      channel: '',
      channelList: [],
      grate: '',
      grateList: [],
      productValueList: [],
      productList: []
    }
  },
  created () {
    var vm = this
    // 产品大类查询
    api.searchProduct({}).then(re => {
      var allData = re.data.data
      for (var i = 0; i < allData.length; i++) {
        vm.productTypeList.push({
          value: allData[i].productType + '-' + allData[i].productTypeName,
          label: allData[i].productTypeName
        })
      }
    })
  },
  methods: {
    reback () {
      var vm = this
      vm.$router.push('cpyscs')
    },
    productTypeCheck () {
      var vm = this
      // 查询生效版本
      vm.productVersion = ''
      api
        .searchProductVersion({
          productType: vm.productType.split('-')[0],
          isValid: '0'
        })
        .then(re => {
          vm.productVersion = re.data.data[0].productVersion
          // 查询生效版本
          api
            .searchByVersion({
              productType: vm.productType.split('-')[0],
              productVersion: vm.productVersion
            })
            .then(re => {
              vm.productList = re.data.data
            })
            .catch(er => { })
          // 渠道和期数
          var tenorTmp = []
          var channelTmp = []
          api
            .searchChannelAndTerm({ productType: vm.productType.split('-')[0] })
            .then(re => {
              for (var i = 0; i < re.data.data.termList.length; i++) {
                tenorTmp.push({
                  value: re.data.data.termList[i].term + '',
                  label: re.data.data.termList[i].term + '期'
                })
              }
              for (let i = 0; i < re.data.data.channelList.length; i++) {
                if (re.data.data.channelList[i].channelCode === 103) {
                  channelTmp.push({
                    value: 103 + '-线上渠道',
                    label: '线上渠道'
                  })
                } else if (re.data.data.channelList[i].channelCode === 101) {
                  channelTmp.push({
                    value: 101 + '-保险渠道',
                    label: '保险渠道'
                  })
                } else if (re.data.data.channelList[i].channelCode === 102) {
                  channelTmp.push({
                    value: 102 + '-银行渠道',
                    label: '银行渠道'
                  })
                }
              }
              vm.tenorList = tenorTmp
              vm.channelList = channelTmp
            })
            .catch(er => { })
        })
        .catch(er => { })
    },
    chooseAll (param) {
      var vm = this
      if (vm.mark === '') {
        vm.productValueList = []
        for (var i = 0; i < vm.productList.length; i++) {
          vm.productValueList.push(
            vm.productList[i].productCode + ':' + vm.productList[i].productName
          )
        }
        vm.mark = '1'
      } else if (vm.mark === '1') {
        vm.productValueList = []
      }
    },
    conf () {
      var vm = this
      if (vm.productType === '') {
        this.$alert({ title: '提示', content: '请选择产品大类' })
        return
      }
      if (vm.version === '') {
        this.$alert({ title: '提示', content: '版本不能为空' })
        return
      }
      if (vm.channel === '') {
        this.$alert({ title: '提示', content: '请选择渠道' })
        return
      }
      if (vm.tenor === '') {
        this.$alert({ title: '提示', content: '请选择期数' })
        return
      }
      //   if (vm.grate.trim() == "") {
      //     this.$alert({ title: "提示", content: "请输入评级" });
      //     return;
      //   }
      if (vm.productValueList.length === 0) {
        this.$alert({ title: '提示', content: '请选择产品细类' })
        return
      }
      var param = {
        productType: vm.productType.split('-')[0],
        productTypeName: vm.productType.split('-')[1],
        productVersion: vm.productVersion,
        channel: vm.channel.split('-')[0],
        channelName: vm.channel.split('-')[1],
        tenor: vm.tenor,
        productValueList: vm.productValueList,
        grate: '5'
      }
      api.addproductMapped(param).then(re => {
        if (re.data.code === 'success') {
          this.$alert({ title: '提示', content: re.data.data })
        }
      }).catch(er => {

      })
    }
  }
}
</script>

<style lang="less">
.cpyszjy-page {
  .ll {
  }
  #middle {
    margin: 100px auto;
    width: 500px;
  }
  #middle .v-form-label {
    font-size: 15px;
  }
  #middle .versionNum {
    width: 80px;
  }
  #middle .channel {
    font-size: 12px;
  }
  .bt {
    margin: 10px 71px;
  }
  .check {
    display: inline-block;
  }
  .termRange {
    margin-right: 20px;
  }
  .v-tag {
    padding: 6px 10px;
    min-width: 10px;
  }
  #tagContainer {
    margin-top: 10px;
  }
  .middiv {
    display: inline-block;
    width: 118px;
  }
  .v-checkbox {
    margin: 15px 20px 6px 15px;
    display: inline-block;
  }
}
</style>
